<%@ page import="com.ws.q1.conifg.Res"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线路信息列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <style>
        .cus-container {
            width: 1368px;
        }
        #user-add .modal-content {
            padding: 0 20px 20px;
        }
        #user-edit .modal-content {
            padding: 0 20px 20px;
        }
        .pagination-container {
            margin-top: 20px;
        }
        .pagination-container a, .pagination-container span {
            margin: 0 5px;
        }
        .pagination-container a {
            text-decoration: none;
            color: #007bff;
        }
        .pagination-container span {
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="container cus-container">
    <h3 class="text-center">线路信息列表</h3>
    <div>
        <!-- 搜索框div -->
        <div id="search-user" style="float: left; margin: 10px 0px;">
            <form class="form-inline" action="${pageContext.request.contextPath}/xianlu/list" method="get">
                <div class="form-group">
                    <label>线路名称</label>
                    <input type="text" name="name" value="${param.name}" class="form-control">
                </div>
                <div class="form-group" style="margin-left:10px;">
                    <label>出发地</label>
                    <input type="text" name="chufadi" value="${param.chufadi}" class="form-control">
                </div>
                <div class="form-group" style="margin-left:10px;">
                    <label>目的地</label>
                    <input type="text" name="mudidi" value="${param.mudidi}" class="form-control">
                </div>
                <div class="form-group" style="margin-left:10px;">
                    <label>价格</label>
                    <input type="number" name="price" value="${param.price}" class="form-control">
                </div>
                <div class="form-group" style="margin-left:10px;">
                    <label>供应商</label>
                    <select name="gongyingshangId" class="form-control">
                        <option value="">全部</option>
                        <c:forEach items="${list2}" var="gys">
                            <option value="${gys.id}" ${param.gongyingshangId == gys.id ? 'selected' : ''}>${gys.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <button type="button" class="btn btn-default" onclick="clearSearch()">清空</button>
                <button type="submit" class="btn" style="color: #fff; background-color: #dc3545; border-color: #dc3545;">查询</button>

            </form>
        </div>

        <!-- 添加、删除的按钮 -->
        <div style="float: right; margin: 10px 0px;">
            <a href="${pageContext.request.contextPath}/xianlu/tiao" class="btn btn-success">增加</a>
        </div>
    </div>
    <table class="table table-striped table-hover">
        <thead class="table-dark">
        <tr>
            <th>线路id</th>
            <th>线路名称</th>
            <th>出发地</th>
            <th>目的地</th>
            <th>价格</th>
            <th>行程天数</th>
            <th>线路主图</th>
            <th>供应商</th>
            <th>栏目</th>
            <th>轮播</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${list}" var="xianlu">
            <tr>
                <td>${xianlu.id}</td>
                <td>${xianlu.name}</td>
                <td>${xianlu.chufadi}</td>
                <td>${xianlu.mudidi}</td>
                <td>${xianlu.price}</td>
                <td>${xianlu.days}</td>
                <td><img class="user-avatar" src="<%=Res.fileUrl%>${xianlu.tou}" width="50" height="50" alt=""></td>
                <td>${xianlu.gongyingshang_name}</td>
                <td>${xianlu.lanmu_name}</td>
                <td>${xianlu.lunbo}</td>
                <td>
                    <a href="${pageContext.request.contextPath}/xianlu/delete?id=${xianlu.id}" class="btn btn-danger">删除</a>
                    <a href="${pageContext.request.contextPath}/xianlu/huixian?id=${xianlu.id}" class="btn btn-primary">修改</a>
                    <c:if test="${xianlu.lunbo == 1}">
                        <a href="${pageContext.request.contextPath}/xianlu/lunbo?id=${xianlu.id}" class="btn btn-warning">取消轮播</a>
                    </c:if>
                    <c:if test="${xianlu.lunbo == 0}">
                        <a href="${pageContext.request.contextPath}/xianlu/lunbo1?id=${xianlu.id}" class="btn btn-success">轮播</a>
                    </c:if>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <!-- 分页导航 -->
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm justify-content-center">
            <!-- 上一页 -->
            <li class="page-item ${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                <a class="page-link" href="?currentPage=${pageInfo.pageNum - 1}&name=${param.name}&chufadi=${param.chufadi}&mudidi=${param.mudidi}&price=${param.price}&gongyingshangId=${param.gongyingshangId}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <!-- 页码 -->
            <c:forEach begin="${startPage}" end="${endPage}" var="i">
                <li class="page-item ${i == pageInfo.pageNum ? 'active' : ''}">
                    <a class="page-link" href="?currentPage=${i}&name=${param.name}&chufadi=${param.chufadi}&mudidi=${param.mudidi}&price=${param.price}&gongyingshangId=${param.gongyingshangId}">${i}</a>
                </li>
            </c:forEach>
            <!-- 下一页 -->
            <li class="page-item ${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                <a class="page-link" href="?currentPage=${pageInfo.pageNum + 1}&name=${param.name}&chufadi=${param.chufadi}&mudidi=${param.mudidi}&price=${param.price}&gongyingshangId=${param.gongyingshangId}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
<script>
    // 清空搜索框
    function clearSearch() {
        document.querySelector('input[name="name"]').value = '';
        document.querySelector('input[name="chufadi"]').value = '';
        document.querySelector('input[name="mudidi"]').value = '';
        document.querySelector('input[name="price"]').value = '';
        document.querySelector('select[name="gongyingshangId"]').selectedIndex = 0;
        document.forms[0].submit();
    }
</script>
</body>
</html>
